<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
</head>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
    <body>
        <!--
            Vue中有两种数据绑定的方式：
                1.单项绑定（v-bind）：数据只能从data流向页面；
                2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data；
                备注：
                    1.双向数据绑定一般都应用在表单元素上（例如：input、select等）；
                    2.v-model:value可以简写为v-model，因为v-model默认收集的就是value值。
        -->
        <!-- 准备一个容器 -->
        <div id="root">
            <!-- 普通写法 -->
            <!--
            单向数据绑定(v-bind)：<input type="text" v-bind:value="name"><br/>
            双向数据绑定(v-model)：<input type="text" v-model:value="name"><br/>
            -->
            
            <!--简写 -->
            单向数据绑定(v-bind)：<input type="text" :value="name"><br/>
            双向数据绑定(v-model)：<input type="text" v-model="name"><br/>

            <!-- 以下代码是错误的，因为v-model:（双向数据绑定）只能应用在表单类元素（输入类元素等）上 -->
            <h2 v-model:x="name">你好啊</h2>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false //设置为 false 以阻止 vue 在启动时生成生产提示。

            new Vue({
                el:"#root",
                data:{
                    name:'覃小宝'
                }
            })
        </script>
    </body>
</html>